<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { goRegisterAndBack } from '@/utils/user'
import user from '@/composables/user'
import { fastInsurance } from '@/api/period-insurance'
import type { InsuranceRecordDto } from '@/api/period-insurance/type'
import { shake } from '@/utils/utils'

const title = ref('')
const status = ref()
const msg = ref('')
const info = ref({} as InsuranceRecordDto)
const options = ref({})
const qrProjectId = ref('')

const imageUrl = computed(() => {
    const map = {
        1: 'https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager3f71e6ba-a1ea-4d0f-8699-00328f8ebb4a.png',
        2: 'https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager4290cabe-7228-4077-9d94-bd9f22f859ed.png',
        3: 'https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager918faf99-032e-4dca-a5cf-dd099548d950.png',
    }
    return status.value ? map[status.value as keyof typeof map] : ''
})

function onGoHome() {
    uni.switchTab({ url: '/pages/clock/clock' })
}

function login() {
    console.log('login-scene', `scene=${encodeURIComponent(`scene=${qrProjectId.value})`)}`)
    goRegisterAndBack(false, `/pages/fast-insurance-status/fast-insurance-status?scene=${encodeURIComponent(`id=${qrProjectId.value}`)}`)
}

async function handleToRegister() {
    const res = await uni.showModal({
        title: '提示',
        content: '您还未注册，是否立即前往注册？',
    })
    res.confirm && login()
    res.cancel && onGoHome()
}

onLoad((option) => {
    console.log('option', option?.scene)
    options.value = option || {}
    if (option?.scene)
        qrProjectId.value = decodeURIComponent(option.scene).split('=')[1]
})

onShow(async () => {
    await user.waitLogin().catch(() => {})
    if (!user.userInfo.value.userId) {
        shake(() => {
            console.log('do-login')
            login()
        })
        return
    }
    if (!user.userInfo.value.userName || !user.userInfo.value.idCardNo) {
        const res = await uni.showModal({
            title: '提示',
            content: '请完成实名',
        })
        res.cancel && onGoHome()
        res.confirm && (uni.redirectTo({ url: '/package-mine/pages/personal-info/personal-info' }))
        return
    }
    if (!qrProjectId.value)
        return
    const res = await fastInsurance({
        qrProjectId: qrProjectId.value,
        staffRecord: {
            userName: user.userInfo.value.userName,
            idCardNo: user.userInfo.value.idCardNo,
        },
    }).catch((err) => {
        err === undefined && handleToRegister()
    })

    if (res?.code === 1) {
        status.value = 3
        title.value = '投保失败'
        msg.value = res.msg
    }
    else if (res?.code === 3) {
        status.value = 4
        title.value = '投保失败'
        msg.value = res.msg
        info.value = res.record as InsuranceRecordDto
    }
    else {
        if (res?.record?.policyStatus === 0) {
            status.value = 1
            title.value = '投保申请已提交'
            msg.value = `您已提交申请，待${res.record.insurStartTime}后保险即可生效`
        }
        else if (res?.record?.policyStatus === 1) {
            status.value = 2
            title.value = '保障中'
            msg.value = '投保成功，当前保险已生效'
        }
        console.log('status', status.value)
        console.log('title', title.value)
        console.log('msg', msg.value)
        info.value = res?.record as InsuranceRecordDto
    }
})
</script>

<template>
    <NavbarContainer>
        <view class="container-box" :class="{ 'success-bg': status === 1 || status === 2, 'fail-bg': status === 3 }">
            <view class="status-box">
                <image v-if="status" class="status-icon"
                       :src="imageUrl"
                       mode="scaleToFill" />
                <view class="mb-24rpx text-48rpx font-600"
                      :class="{ 'text-green': status === 1 || status === 2, 'text-orange': status === 3 || status === 4 }">
                    {{ title }}
                </view>
                <view class="px-100rpx text-center text-28rpx text-#6b6b86">{{ msg }}</view>
                <view v-if="status === 1 || status === 2 || status === 4" class="infomsglist">
                    <view style="border-top: 2rpx solid #f0eff6; padding-top: 56rpx;" />
                    <view class="infoListItem">
                        <view class="label">
                            <image
                                src="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerc684666a-c0ad-48be-bf42-3ffd9ec79aad.png"
                                class="icon" mode="scaleToFill" />
                            劳务公司：
                        </view>
                        <view class="labelContent">{{ info.companyName }}</view>
                    </view>
                    <view class="infoListItem">
                        <view class="label">
                            <image
                                src="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager5f6ac551-7dee-4c23-9d9d-408c8990e66b.png"
                                class="icon" mode="scaleToFill" />
                            工作单位：
                        </view>
                        <view class="labelContent">{{ info.serveCompanyName }}</view>
                    </view>
                    <view class="infoListItem">
                        <view class="label">
                            <image
                                src="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager84106c67-a5e2-4ef0-a021-30e770eae4a2.png"
                                class="icon" mode="scaleToFill" />
                            方案名称：
                        </view>
                        <view class="labelContent">{{ info.companyPlanName }}</view>
                    </view>
                    <view class="infoListItem">
                        <view class="label">
                            <image
                                src="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagere408039a-8391-48c2-bb14-6f12d2e8cf09.png"
                                class="icon" mode="scaleToFill" />
                            保障工种：
                        </view>
                        <view class="labelContent">【{{ info.occupationLevel }}类】{{ info.occupationName }}</view>
                    </view>
                </view>
                <view v-if="status !== ''" class="btn mt-130rpx text-32rpx text-blue" @click="onGoHome">
                    返回
                </view>
            </view>
        </view>
    </NavbarContainer>
</template>

<style scoped>
.container-box {
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    box-sizing: border-box;
}

.success-bg {
    background: linear-gradient(180deg, #d2f3e9 0%, #ffffff 42%);
}

.fail-bg {
    background: linear-gradient(180deg, #f9ebe5 0%, #ffffff 42%);
}

.status-box {
    width: 100%;
    box-sizing: border-box;
    padding-top: 82rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.status-icon {
    width: 324rpx;
    height: 318rpx;
    margin-bottom: 48rpx;
}

.btn {
    width: 480rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(62, 95, 245, 0.16);
    border-radius: 44rpx;
}

.infomsglist {
    margin-top: 50rpx;
    width: 100%;
    box-sizing: border-box;
    padding: 0 48rpx 0;
    display: flex;
    flex-direction: column;
    gap: 32rpx;
}

.infoListItem {
    display: flex;
    align-items: center;
    gap: 16rpx;
}

.labelContent {
    font-size: 24rpx;
    color: #202536;
    flex: 1;
    overflow: hidden;
    word-break: break-all;
}

.label .icon {
    width: 32rpx;
    height: 32rpx;
}

.label {
    display: flex;
    align-items: center;
    gap: 16rpx;
    flex-shrink: 0;
    font-size: 24rpx;
    color: #565868;
}
</style>

<route lang="json">
{
    "style": {
        "mp-alipay": {
            "transparentTitle": "always"
        }
    }
}
</route>
